<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/new_file.css" />
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/flexible.js"></script>
		<script src="js/jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.contions>.html {
			display: none;
		}
		
		.contions>.html:first-child {
			display: block;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			var length,
				currentIndex = 0,
				interval,
				hasStarted = false, //是否已经开始轮播 
				t = 3000; //轮播时间间隔 
			length = $('.slider-panel').length;
			//将除了第一张图片隐藏 
			$('.slider-panel:not(:first)').hide();
			//将第一个slider-item设为激活状态 
			$('.slider-item:first').addClass('slider-item-selected');
			//隐藏向前、向后翻按钮 
			$('.slider-page').hide();
			//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 
			$('.slider-panel, .slider-pre, .slider-next').hover(function() {
				stop();
				$('.slider-page').show();
			}, function() {
				$('.slider-page').hide();
				start();
			});
			$('.slider-item').hover(function(e) {
				stop();
				var preIndex = $(".slider-item").filter(".slider-item-selected").index();
				currentIndex = $(this).index();
				play(preIndex, currentIndex);
			}, function() {
				start();
			});
			$('.slider-pre').unbind('click');
			$('.slider-pre').bind('click', function() {
				pre();
			});
			$('.slider-next').unbind('click');
			$('.slider-next').bind('click', function() {
				next();
			});
			/** 
			 * 向前翻页 
			 */
			function pre() {
				var preIndex = currentIndex;
				currentIndex = (--currentIndex + length) % length;
				play(preIndex, currentIndex);
			}
			/** 
			 * 向后翻页 
			 */
			function next() {
				var preIndex = currentIndex;
				currentIndex = ++currentIndex % length;
				play(preIndex, currentIndex);
			}
			/** 
			 * 从preIndex页翻到currentIndex页 
			 * preIndex 整数，翻页的起始页 
			 * currentIndex 整数，翻到的那页 
			 */
			function play(preIndex, currentIndex) {
				$('.slider-panel').eq(preIndex).fadeOut(500)
					.parent().children().eq(currentIndex).fadeIn(1000);
				$('.slider-item').removeClass('slider-item-selected');
				$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
			}
			/** 
			 * 开始轮播 
			 */
			function start() {
				if(!hasStarted) {
					hasStarted = true;
					interval = setInterval(next, t);
				}
			}
			/** 
			 * 停止轮播 
			 */
			function stop() {
				clearInterval(interval);
				hasStarted = false;
			}
			//开始轮播 
			start();
		});
	</script>

	<body>
		<div class="box">
			<div class="head">
				<header>
					<!--<div class="scan">
					</div>
					<span class="location">学数界</span>
					<div class="search"></div>-->
				</header>
				<div id="from">
					<div id="aa">
						<input type="text" name="from_1" id="from_1" placeholder="搜索" />
					</div>
					<div id="bb">
						<img class="from_img" src="img/max.png" />
					</div>
				</div>
			</div>
			<div class="slider">
				<ul class="slider-main">
					<li class="slider-panel">
						<a href="play.html"><img class="img" alt="关注脚本之家" title="关注脚本之家" src="img/banerone.jpg"></a>
					</li>
					<li class="slider-panel">
						<a href="play.html"><img class="img" alt="关注脚本之家" title="关注脚本之家" src="img/baner2.jpg"></a>
					</li>
					<!--<li class="slider-panel">
						<a href="play.html"><img class="img" alt="关注脚本之家" title="关注脚本之家" src="img/baner.jpg"></a>
					</li>
					<li class="slider-panel">
						<a href="play.html"><img class="img" alt="关注脚本之家" title="关注脚本之家" src="img/baner2.jpg"></a>
					</li>-->
				</ul>
				<div class="slider-extra">
					<ul class="slider-nav">
						<li class="slider-item"></li>
						<li class="slider-item"></li>
						<!--<li class="slider-item"></li>
						<li class="slider-item"></li>-->
					</ul>
					<div class="slider-page">
						<a class="slider-pre" href="javascript:;;">
							<</a>
								<a class="slider-next" href="javascript:;;">></a>
					</div>
				</div>
			</div>
			<div id="div">
				<div id="div_one">
					<div style="color:#fff;background-color: #529ff9;" class="div1 lischeck" data-menu="0">
						<img class="image" src="img/book2.png" /> 必修一
					</div>
					<div class="div1" data-menu="1">
						<img class="image" onclick="book2()" src="img/book.png" /> 必修二
					</div>
					<div class="div1" data-menu="2">
						<img class="image" src="img/book.png" /> 必修三
					</div>
					<div class="div1" data-menu="3">
						<img class="image" src="img/book.png" /> 必修四
					</div>
					<div class="div1" data-menu="4">
						<img class="image" src="img/book.png" /> 必修五
					</div>
					<div class="div1" data-menu="5">
						<img class="image" src="img/book.png" /> 选修一
					</div>
					<div class="div1" data-menu="6">
						<img class="image" src="img/book.png" /> 选修二
					</div>
					<div class="div1" data-menu="7">
						<img class="image" src="img/book.png" /> 选修三
					</div>
					<div class="div1" data-menu="8">
						<img class="image" src="img/book.png" /> 选修四
					</div>
					<!--<div class="div1" data-menu="9">
						<img class="image" src="img/book.png" />
						必修一
					</div>-->

				</div>
			</div>

			<!--one-->
			<div class="contions">
				<div class="html">
					<div id="yuan">
						<div id="yuan_1" class="yuan_1" style="background-color: #549EF7;color: #fff;">
							<div id="cc" class="cc">
								第一章
							</div>
							<div id="dd">
								集&nbsp;合
							</div>
						</div>
						<div id="yuan_1" class="yuan_1">
							<div id="cc" class="cc">
								第二章
							</div>
							<div id="dd">
								函&nbsp;数
							</div>
						</div>
						<div id="yuan_1" class="yuan_1">
							<div id="cc" class="cc">
								第三章
							</div>
							<div id="dd">
								指对幂
							</div>
						</div>
						<!--<div id="yuan_1">
							<div id="cc" class="cc">
								第一章
							</div>
							<div id="dd">
								指数函数
							</div>
						</div>-->

					</div>
					
					<div id="click">
						<div id="click_one" lischeck data-menu="0">

							<div style="background-color:#549EF7;color: #fff;" id="click_1 " class="click_1 " data-menu="0 ">
								集&nbsp;合
							</div>

							<div id="click_1 " class="click_1 " data-menu="1 ">
								函&nbsp;数
							</div>
							<div id="click_1 " class="click_1 " data-menu="2 ">
								指对幂
							</div>
							<div id="click_1 " class="click_1 " data-menu="3 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="4 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="5 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="6 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="7 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="8 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="9 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="10 ">
								函数关系
							</div>

						</div>
					</div>

					<!--<div class="all">
							<b>函数关系</b>
						</div>-->
					<div id="video ">
						<div class="shipin_one">
							<a href="gmy.html">
							<div id="shipin_1 ">

								<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
								<video id="video1 " style="margin-left: 0.333333rem;">
									<source src="video/mov_bbb.mp4 " type="video/mp4 ">
									<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

								</video>

							</div>
							</a>
							<div class="you">
								
								<p class="p2" style="margin-top: 0.233333rem;">同角三角函数</p>
								<p class="p1"><span>12800</span>正在观看</p>
							</div>
						</div>
						<div class="shipin_one">
							<div id="shipin_1 ">

								<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
								<video id="video1" style="margin-left: 0.333333rem;">
									<source src="video/mov_bbb.mp4 " type="video/mp4 ">
									<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

								</video>

							</div>
							<div class="you">
								
								<p class="p2 " style="margin-top: 0.233333rem;">同角三角函数</p>
								<p class="p1 "><span>12800</span>正在观看</p>
								
							</div>
						</div>
						<div class="shipin_one">
							<div id="shipin_1 ">

								<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
								<video id="video1" style="margin-left: 0.333333rem;">
									<source src="video/mov_bbb.mp4 " type="video/mp4 ">
									<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

								</video>

							</div>
							<div class="you">
								
								<p class="p2 " style="margin-top: 0.233333rem;">同角三角函数</p>
								<p class="p1 "><span>12800</span>正在观看</p>
								
							</div>
						</div>
						<div class="shipin_one">
							<div id="shipin_1 ">

								<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
								<video id="video1" style="margin-left: 0.333333rem;">
									<source src="video/mov_bbb.mp4 " type="video/mp4 ">
									<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

								</video>

							</div>
							<div class="you">
								
								<p class="p2 " style="margin-top: 0.233333rem;">同角三角函数</p>
								<p class="p1 "><span>12800</span>正在观看</p>
								
							</div>
						</div>

					</div>

				</div>
				<!--two-->
				<div class="html">
					<div id="yuan">
						<div id="yuan_1">
							<div id="cc">
								第一章
							</div>
							<div id="dd">
								立体几何
							</div>
						</div>
						<div id="yuan_1">
							<div id="cc">
								第二章
							</div>
							<div id="dd">
								直线和圆
							</div>
						</div>
						<div id="yuan_1">
							<div id="cc">
								第一章
							</div>
							<div id="dd">
								指数函数
							</div>
						</div>
						<!--<div id="yuan_1">
							<div id="cc">
								第一章
							</div>
							<div id="dd">
								指数函数
							</div>
						</div>-->

					</div>
					<div id="null">

					</div>
					<div id="click">
						<div id="click_one" lischeck data-menu="0">

							<div id="click_1 " class="click_1 " data-menu="0 ">
								函数关系
							</div>

							<div id="click_1 " class="click_1 " data-menu="1 ">
								函数关系
							</div>
							<div id="click_1 " class="click_1 " data-menu="2 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="3 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="4 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="5 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="6 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="7 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="8 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="9 ">
								函数关系函
							</div>
							<div id="click_1 " class="click_1 " data-menu="10 ">
								函数关系
							</div>

						</div>
					</div>

					<!--<div class="all">
							<b>函数关系</b>
						</div>-->
					<div id="video ">
						<div class="shipin_one">
							<div id="shipin_1 ">

								<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
								<video id="video1 ">
									<source src="video/mov_bbb.mp4 " type="video/mp4 ">
									<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

								</video>

							</div>
							<div class="you">
								<p class="p1 "><span>12800</span>正在观看</p>
								<p class="p2 ">同角三角函数</p>
								<p class="p3 ">2017辽宁高考题9题</p>
							</div>
						</div>
						<div class="shipin_one">
							<div id="shipin_1 ">

								<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
								<video id="video1" style="margin-left: 0.333333rem;">
									<source src="video/mov_bbb.mp4 " type="video/mp4 ">
									<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

								</video>

							</div>
							<div class="you">
								<p class="p1 "><span>12800</span>正在观看</p>
								<p class="p2 ">同角三角函数</p>
								<p class="p3 ">2017辽宁高考题9题</p>
							</div>
						</div>
						<div class="shipin_one">
							<div id="shipin_1 ">

								<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
								<video id="video1" style="margin-left: 0.333333rem;">
									<source src="video/mov_bbb.mp4 " type="video/mp4 ">
									<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

								</video>

							</div>
							<div class="you">
								<p class="p1 "><span>12800</span>正在观看</p>
								<p class="p2 ">同角三角函数</p>
								<p class="p3 ">2017辽宁高考题9题</p>
							</div>
						</div>
						<div class="shipin_one">
							<div id="shipin_1 ">

								<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
								<video id="video1" style="margin-left: 0.333333rem;">
									<source src="video/mov_bbb.mp4 " type="video/mp4 ">
									<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

								</video>

							</div>
							<div class="you">
								<p class="p1 "><span>12800</span>正在观看</p>
								<p class="p2 ">同角三角函数</p>
								<p class="p3 ">2017辽宁高考题9题</p>
							</div>
						</div>

					</div>

				</div>

			</div>
			<div class="bottom ">
				<div class="bottom_one ">
					<a href="#">
						<img class="oneo" src="img/mes.png" />
						<p style="color: #549EF7;">首页</p>
					</a>
				</div>
				<div class="bottom_one ">
					<a href="index-1.html ">
						<img class="one1" src="img/meiriyiti.png " />
						<p>每天一题</p>
					</a>
				</div>
				<div class="bottom_one ">
					<a href="gkzh.html">
						<img class="one1 " src="img/gaokaozonghe-1.png " />
						<p>高考综合</p>
					</a>
				</div>
				<div class="bottom_one ">
					<a href="shitiku.html">
						<img class="one2 " src="img/shitiku.png " />
						<p>试题库</p>
					</a>
				</div>
				<div class="bottom_one ">
					<a href="me.html ">
						<img src="img/wodeyemian.png " />
						<p>我的</p>
					</a>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(".div1").on("click", function() {
			$(this).addClass("lischeck")
				.siblings().removeClass("lischeck");

			$($(".contions").children(1)[$(this).data("menu")]).show()
				.siblings().hide();
		});
		//必修一改变背景色和文字颜色
		$(".div1").each(function() {
			$(this).click(function() {
				$(this).css("background-color", "#529ff9");
				$(this).css("color", "#fff");
				$(this).siblings().css("background-color", "#fff");
				$(this).siblings().css("color", "#529ff9");
				$(this).children().attr("src", "img/book2.png");
				$(this).siblings().children().attr("src", "img/book.png");

			});
		});
		//yuan_1改变背景色和文字颜色
		$(".yuan_1").each(function() {
			$(this).click(function() {
				$(this).css("background-color", "#529ff9");
				$(this).css("color", "#fff");
				$(this).siblings().css("background-color", "#fff");
				$(this).siblings().css("color", "#b3b3b3");

				

			});
		});
//		$(".cc").each(function() {
//			$(this).click(function() {
//				$(this).css({
//					"background-color": "#549ef7",
//					"color": "#fff"
//				});
//				$(this).parent().siblings().children(".cc").css({
//					"color": "gray",
//					"background-color": "#fff"
//				});
//			});
//		});

		//改变背景色和文字颜色
		$(".click_1").each(function() {
			$(this).click(function() {

				$(this).css("color", "#fff");
				//$(this).css("font-size","26px");

				$(this).siblings().css("color", "gainsboro");
				//$(this).siblings().css("font-size","");
			});
		});
	</script>

</html>